<template>
	<view>
		<view class="topcard" :style="{ 'background-image': 'url(' + bgimg + ')' }">
			<view class="content">
				<view class="cardleave">
						<span>{{cardInfo.name}}</span>
				</view>
				<view class="lastdata">
					有效期: <span>{{cardInfo.dateyx}}天</span>
				</view>
				<view class="lastdata">
					购买期限: <span>{{cardInfo.activityDuration | dateFormat}}</span>
				</view>
			</view>
		</view>
		<view class="middle">
			<view class="title">
				<view class="title-left">
					包含服务
				</view>
				<view class="title-right" style="margin-left: 20rpx;">
					Server
				</view>
			</view>
			<view class="content">
				<!-- <scroll-view class="scroll-view_H" scroll-x="true">
					<view class="scroll-view-item_H" v-if="cardInfo.server.server1 != 0">
						<view class="image">
							<image :src="http + cardInfo.serlist[0].squareImage" mode=""></image>
						</view>
						<view class="name">
							{{cardInfo.serlist[0].title}}
						</view>
						<view class="number">
							{{cardInfo.server.server1}}次
						</view>
					</view>
					<view class="scroll-view-item_H" v-if="cardInfo.server.server2 != 0">
						<view class="image">
							<image :src="http + cardInfo.serlist[1].squareImage" mode=""></image>
						</view>
						<view class="name">
							{{cardInfo.serlist[1].title}}
						</view>
						<view class="number">
							{{cardInfo.server.server2}}次
						</view>
					</view>
					<view class="scroll-view-item_H" v-if="cardInfo.server.server3 != 0">
						<view class="image">
							<image :src="http + cardInfo.serlist[2].squareImage" mode=""></image>
						</view>
						<view class="name">
							{{cardInfo.serlist[2].title}}
						</view>
						<view class="number">
							{{cardInfo.server.server3}}次
						</view>
					</view>
					<view class="scroll-view-item_H" v-if="cardInfo.server.server4 != 0">
						<view class="image">
							<image :src="http + cardInfo.serlist[3].squareImage" mode=""></image>
						</view>
						<view class="name">
							{{cardInfo.serlist[3].title}}
						</view>
						<view class="number">
							{{cardInfo.server.server4}}次
						</view>
					</view>
					<view class="scroll-view-item_H" v-if="cardInfo.server.server5 != 0">
						<view class="image">
							<image :src="http + cardInfo.serlist[4].squareImage" mode=""></image>
						</view>
						<view class="name">
							{{cardInfo.serlist[4].title}}
						</view>
						<view class="number">
							{{cardInfo.server.server5}}次
						</view>
					</view>
					<view class="scroll-view-item_H" v-if="cardInfo.server.server6 != 0">
						<view class="image">
							<image :src="http + cardInfo.serlist[5].squareImage" mode=""></image>
						</view>
						<view class="name">
							{{cardInfo.serlist[5].title}}
						</view>
						<view class="number">
							{{cardInfo.server.server6}}次
						</view>
					</view>
					<view class="scroll-view-item_H" v-if="cardInfo.server.server7 != 0">
						<view class="image">
							<image :src="http + cardInfo.serlist[6].squareImage" mode=""></image>
						</view>
						<view class="name">
							{{cardInfo.serlist[6].title}}
						</view>
						<view class="number">
							{{cardInfo.server.server7}}次
						</view>
					</view>
					<view class="scroll-view-item_H" v-if="cardInfo.server.server8 != 0">
						<view class="image">
							<image :src="http + cardInfo.serlist[7].squareImage" mode=""></image>
						</view>
						<view class="name">
							{{cardInfo.serlist[7].title}}
						</view>
						<view class="number">
							{{cardInfo.server.server8}}次
						</view>
					</view>
					<view class="scroll-view-item_H" v-if="cardInfo.server.server9 != 0">
						<view class="image">
							<image :src="http + cardInfo.serlist[8].squareImage" mode=""></image>
						</view>
						<view class="name">
							{{cardInfo.serlist[8].title}}
						</view>
						<view class="number">
							{{cardInfo.server.server9}}次
						</view>
					</view>
					<view class="scroll-view-item_H" v-if="cardInfo.server.server10 != 0">
						<view class="image">
							<image :src="http + cardInfo.serlist[9].squareImage" mode=""></image>
						</view>
						<view class="name">
							{{cardInfo.serlist[9].title}}
						</view>
						<view class="number">
							{{cardInfo.server.server10}}次
						</view>
					</view>
					<view class="scroll-view-item_H" v-if="cardInfo.server.server11 != 0">
						<view class="image">
							<image :src="http + cardInfo.serlist[10].squareImage" mode=""></image>
						</view>
						<view class="name">
							{{cardInfo.serlist[10].title}}
						</view>
						<view class="number">
							{{cardInfo.server.server11}}次
						</view>
					</view>
					<view class="scroll-view-item_H" v-if="cardInfo.server.server12 != 0">
						<view class="image">
							<image :src="http + cardInfo.serlist[11].squareImage" mode=""></image>
						</view>
						<view class="name">
							{{cardInfo.serlist[11].title}}
						</view>
						<view class="number">
							{{cardInfo.server.server12}}次
						</view>
					</view>
					<view class="scroll-view-item_H" v-if="cardInfo.server.server13 != 0">
						<view class="image">
							<image :src="http + cardInfo.serlist[12].squareImage" mode=""></image>
						</view>
						<view class="name">
							{{cardInfo.serlist[12].title}}
						</view>
						<view class="number">
							{{cardInfo.server.server13}}次
						</view>
					</view>
					<view class="scroll-view-item_H" v-if="cardInfo.server.server14 != 0">
						<view class="image">
							<image :src="http + cardInfo.serlist[13].squareImage" mode=""></image>
						</view>
						<view class="name">
							{{cardInfo.serlist[13].title}}
						</view>
						<view class="number">
							{{cardInfo.server.server14}}次
						</view>
					</view>
					<view class="scroll-view-item_H" v-if="cardInfo.server.server15 != 0">
						<view class="image">
							<image :src="http + cardInfo.serlist[14].squareImage" mode=""></image>
						</view>
						<view class="name">
							{{cardInfo.serlist[14].title}}
						</view>
						<view class="number">
							{{cardInfo.server.server15}}次
						</view>
					</view>
					<view class="scroll-view-item_H" v-if="cardInfo.server.server16 != 0">
						<view class="image">
							<image :src="http + cardInfo.serlist[15].squareImage" mode=""></image>
						</view>
						<view class="name">
							{{cardInfo.serlist[15].title}}
						</view>
						<view class="number">
							{{cardInfo.server.server16}}次
						</view>
					</view>
					<view class="scroll-view-item_H" v-if="cardInfo.server.server17 != 0">
						<view class="image">
							<image :src="http + cardInfo.serlist[16].squareImage" mode=""></image>
						</view>
						<view class="name">
							{{cardInfo.serlist[16].title}}
						</view>
						<view class="number">
							{{cardInfo.server.server17}}次
						</view>
					</view>
					<view class="scroll-view-item_H" v-if="cardInfo.server.server18 != 0">
						<view class="image">
							<image :src="http + cardInfo.serlist[17].squareImage" mode=""></image>
						</view>
						<view class="name">
							{{cardInfo.serlist[17].title}}
						</view>
						<view class="number">
							{{cardInfo.server.server18}}次
						</view>
					</view>
					<view class="scroll-view-item_H" v-if="cardInfo.server.server19 != 0">
						<view class="image">
							<image :src="http + cardInfo.serlist[18].squareImage" mode=""></image>
						</view>
						<view class="name">
							{{cardInfo.serlist[18].title}}
						</view>
						<view class="number">
							{{cardInfo.server.server19}}次
						</view>
					</view>
					<view class="scroll-view-item_H" v-if="cardInfo.server.server20 != 0">
						<view class="image">
							<image :src="http + cardInfo.serlist[19].squareImage" mode=""></image>
						</view>
						<view class="name">
							{{cardInfo.serlist[19].title}}
						</view>
						<view class="number">
							{{cardInfo.server.server20}}次
						</view>
					</view>
					<view class="scroll-view-item_H" v-if="cardInfo.server.server21 != 0">
						<view class="image">
							<image :src="http + cardInfo.serlist[20].squareImage" mode=""></image>
						</view>
						<view class="name">
							{{cardInfo.serlist[20].title}}
						</view>
						<view class="number">
							{{cardInfo.server.server21}}次
						</view>
					</view>
					<view class="scroll-view-item_H" v-if="cardInfo.server.server22 != 0">
						<view class="image">
							<image :src="http + cardInfo.serlist[21].squareImage" mode=""></image>
						</view>
						<view class="name">
							{{cardInfo.serlist[21].title}}
						</view>
						<view class="number">
							{{cardInfo.server.server22}}次
						</view>
					</view>
					<view class="scroll-view-item_H" v-if="cardInfo.server.server23 != 0">
						<view class="image">
							<image :src="http + cardInfo.serlist[22].squareImage" mode=""></image>
						</view>
						<view class="name">
							{{cardInfo.serlist[22].title}}
						</view>
						<view class="number">
							{{cardInfo.server.server23}}次
						</view>
					</view>
					<view class="scroll-view-item_H" v-if="cardInfo.server.server24 != 0">
						<view class="image">
							<image :src="http + cardInfo.serlist[23].squareImage" mode=""></image>
						</view>
						<view class="name">
							{{cardInfo.serlist[23].title}}
						</view>
						<view class="number">
							{{cardInfo.server.server24}}次
						</view>
					</view>
					<view class="scroll-view-item_H" v-if="cardInfo.server.server25 != 0">
						<view class="image">
							<image :src="http + cardInfo.serlist[24].squareImage" mode=""></image>
						</view>
						<view class="name">
							{{cardInfo.serlist[24].title}}
						</view>
						<view class="number">
							{{cardInfo.server.server25}}次
						</view>
					</view>
					<view class="scroll-view-item_H" v-if="cardInfo.server.server26 != 0">
						<view class="image">
							<image :src="http + cardInfo.serlist[25].squareImage" mode=""></image>
						</view>
						<view class="name">
							{{cardInfo.serlist[25].title}}
						</view>
						<view class="number">
							{{cardInfo.server.server26}}次
						</view>
					</view>
					<view class="scroll-view-item_H" v-if="cardInfo.server.server27 != 0">
						<view class="image">
							<image :src="http + cardInfo.serlist[26].squareImage" mode=""></image>
						</view>
						<view class="name">
							{{cardInfo.serlist[26].title}}
						</view>
						<view class="number">
							{{cardInfo.server.server27}}次
						</view>
					</view>
					<view class="scroll-view-item_H" v-if="cardInfo.server.server28 != 0">
						<view class="image">
							<image :src="http + cardInfo.serlist[27].squareImage" mode=""></image>
						</view>
						<view class="name">
							{{cardInfo.serlist[27].title}}
						</view>
						<view class="number">
							{{cardInfo.server.server28}}次
						</view>
					</view>
					<view class="scroll-view-item_H" v-if="cardInfo.server.server29 != 0">
						<view class="image">
							<image :src="http + cardInfo.serlist[28].squareImage" mode=""></image>
						</view>
						<view class="name">
							{{cardInfo.serlist[28].title}}
						</view>
						<view class="number">
							{{cardInfo.server.server29}}次
						</view>
					</view>
					<view class="scroll-view-item_H" v-if="cardInfo.server.server30 != 0">
						<view class="image">
							<image :src="http + cardInfo.serlist[29].squareImage" mode=""></image>
						</view>
						<view class="name">
							{{cardInfo.serlist[29].title}}
						</view>
						<view class="number">
							{{cardInfo.server.server30}}次
						</view>
					</view>
				</scroll-view> -->
				<scroll-view class="scroll-view_H" scroll-x="true">
					<view class="scroll-view-item_H" v-if="item.number != 0" v-for="item in cardInfo.list" :key="item.id" @click="goserver(item.id)">
						<view class="image">
							<image :src="http+ item.squareImage" mode=""></image>
						</view>
						<view class="name">
							{{item.title}}
						</view>
						<view class="number">
							{{item.number}}次
						</view>
					</view>
				</scroll-view>
			</view>
			<view class="describe">
				<text>{{cardInfo.detaile}}</text>
			</view>
			<view class="imageList">
				<view class="list-item" v-for="item,k in urlsList" :key="k">
					<image :src="item" mode=""></image>
				</view>
			</view>
		</view>
		<view class="flex">
			<view class="left">
				<u-icon name="rmb" size="21"></u-icon>{{free}}
			</view>
			<view class="right">
				<u-button type="primary" size="medium" @click="buyMember()">立即购买</u-button>
			</view>
		</view>
		<u-toast ref="notice"></u-toast>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				businessinfo: {},//用户数据
				cardInfo: [],//会员卡详情
				urlsList: [],//会员卡的图片列表
				vipId: 0,//会员卡id
				bgimg: '',//会员卡背景图片
				free: 0,//会员卡价格
				http: 'https://luxuries.h1668.com',
				stoid: 0,
			};
		},
		onLoad(options) {
			this.vipId = options.id
			this.businessinfo = this.$u.business.check()
		},
		onShow() {
			this.userData = uni.getStorageSync('userData');
			this.getvipDetail()
			// this.getUserData()
		},
		methods: {
			goserver(id) {
				let item = {
				    serverId: id,
					stoid: this.stoid,
				};
				uni.navigateTo({
					url: '/pagesB/server/serverDetail?item='+ encodeURIComponent(JSON.stringify(item))
				})
			},
			buyMember() {
				let that = this
				uni.request({
					url: uni.getStorageSync('URL') + 'home/order/order/buyMember',
					method: 'POST',
					data: {
						vipid: this.vipId,
						busid: this.businessinfo.id,
						free: this.free
					},
					
					header: {
						"X-Requested-With": "XMLHttpRequest"
					},
					dataType: 'json',
					success: (res)=> {
						console.log(res)
						let data = res.data.data
						let appId = data.appId;
						let timeStamp = data.timeStamp;
						let nonceStr = data.nonceStr;
						let packageX = data.package;
						let signType = data.signType;
						let paySign = data.paySign;
						let orderid = data.orderid;
						let busid = this.businessinfo.id
						//调用支付接口
						uni.requestPayment({ 
							//下面参数为必传
							provider: 'wxpay', //支付类型
							appId: appId, //小程序Appid
							timeStamp: timeStamp , //创建订单时间戳
							nonceStr: nonceStr,
							package: packageX, // 订单包
							signType: signType, // 加密方式统一'MD5'
							paySign: paySign, // 后台支付签名返回
							success(res) {
								
								if (res.errMsg === 'requestPayment:ok') {
									uni.request({
										url: uni.getStorageSync('URL') + 'home/order/order/xiugaiMember',
										method: 'POST',
										data: {
											orderid: orderid,
											busid: busid
										},
										header: {
											"X-Requested-With": "XMLHttpRequest"
										},
										dataType: 'json',
										success: (res)=> {
											that.$refs.notice.show({
												type:"success",
												message:"购买会员卡成功",
												duration:1200,
												complete:()=>{
													uni.reLaunch({
													url: '/pagesB/vipGrade/vipGrade'
												})
												}

											})
										
										}
									})
								}
							},
							fail(err) {
								console.log(err)
								that.$refs.notice.show({
												type:"danger",
												message:"购买会员卡失败",
												duration:1200
												

											})
							}
						});
					},
					fail: (res)=> {
						uni.$u.toast('下单失败')
					}
				});
			},
			getvipDetail() {
				uni.request({
					url: uni.getStorageSync('URL') + 'home/user/user/vipDetail2',
					method: 'POST',
					data: {
						vipid: this.vipId,
						busid: this.userData.id
					},
					header: {
						"X-Requested-With": "XMLHttpRequest"
					},
					dataType: 'json',
					success: (res)=> {
						const result = res.data.data
						this.cardInfo = result
						this.urlsList = result.urlsList
						this.free = result.free
						this.bgimg = result.urlsList[0]
					}
				});
			},
			getUserData() {
				uni.request({
					url: uni.getStorageSync('URL') + 'home/user/user/userData',
					method: 'POST',
					data: {
						busid: this.userData.id
					},
					header: {
						"X-Requested-With": "XMLHttpRequest"
					},
					dataType: 'json',
					success: (res)=> {
						this.userData = res.data.data.user
						this.stoid = res.data.data.user.stoid
					}
				});
			},
		},
		filters: {
			dateFormat: function(val) {// 格式化时间
				const dt = new Date(val*1000)
				const y = dt.getFullYear()
				const m = dt.getMonth() +1
				const d = dt.getDate()
				 
				return `${y}-${m}-${d}`
			},
		}
	}
</script>

<style lang="scss">
page {
	background-color: #fff;
}
.topcard {
	width: 95%;
	height: 500rpx;
	background-color: #000000;
	margin: 20rpx auto;
	border-radius: 20rpx;
	background-repeat: no-repeat;
	background-size: 100% 100%;
	.content {
		color: white;
		width: 100%;
		height: 100%;
		padding: 15rpx;
		display: flex;
		flex-direction: column;
		justify-content: space-around;
		.cardleave {
			width: 100%;
			height: 80rpx;
			line-height: 80rpx;
			font-size: 22px;
			text-align: right;
			span{
				margin-right: 20px;

			}

		}
		.lastdata {
			width: 100%;
			height: 80rpx;

			line-height: 80rpx;
			font-size: 22px;
			text-align: right;
			margin-top: 100rpx;
			span{
				margin-right: 20px;

			}
		}
	}
	
}
.middle {
	padding: 15rpx;
	.title {
		width: 100%;
		font-size: 21px;
		font-family: Helvetica;
		letter-spacing: 2px;
		display: flex;
		line-height: 30px;
		height: 30px;
	}
	.content {
		width: 100%;
		margin-top: 40rpx;
		.scroll-view_H {
			white-space: nowrap;
			width: 100%;
			.scroll-view-item_H {
				display: inline-block;
				width: 40%;
				height: 400rpx;
				background-color: #fafafa;
				margin-left: 10px;
				border-radius: 15rpx;
				.image {
					width: 100%;
					height: 250rpx;
					image{
						width: 100%;
						height: 100%;
						object-fit: contain;
					}
				}
				.name {
					width: 100%;
					height: 80rpx;
					line-height: 80rpx;
					text-align: center;
					color: #010101;
				}
				.number {
					width: 100%;
					height: 40rpx;
					line-height: 40rpx;
					text-align: center;
					color: #8a8a8a;
				}
			}
		}
	}
	.describe {
		width: 100%;
		margin-top: 40rpx;
		font-family: Helvetica;
		letter-spacing: 2px;
		text-indent: 4ch;
		padding: 10rpx;
	}
	.imageList {
		width: 100%;
		margin-top: 40rpx;
		padding: 10rpx;
		.list-item {
			width: 100%;
			height: 400rpx;
			image {
				width: 100%;
				height: 100%;
				object-fit: contain;
			}
		}
	}
}
.flex {
	width: 90%;
	height: 90rpx;
	background-color: #fff;
	position: fixed;
	bottom: 80rpx;
	left: 0;
	right: 0;
	margin: 0 auto;
	box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
	border-radius: 15rpx;
	display: flex;
	.left {
		display: flex;
		width: 50%;
		height: 90rpx;
		line-height: 90rpx;
		font-size: 20px;
		color: red;
		margin-left: 20rpx;
	}
	.right {
		width: 50%;
		display: flex;
		align-items: center;
		justify-content: center;
	}
}
</style>
